<template>
  <div class="movies">
    <div
      class="movies-item"
      v-for="item in moviesList"
      :key="item.id"
      @click="goToDetail(item.id)"
    >
      <div class="movies-left">
        <img :src="item.img" alt="" />
      </div>
      <div class="movies-right">
        <div class="movies-info">
          <p class="title">
            {{ item.nm }}
            <img
              v-if="item.version === 'v2d imax'"
              src="../../../assets/images/v2dimax.png"
            />
            <img
              v-if="item.version === 'v3d imax'"
              src="../../../assets/images/v3dimax.png"
            />
          </p>
          <p class="score">
            观众评：<span style="color: #faaf00; font-weight: 900">{{
              item.sc
            }}</span>
          </p>
          <p class="star">主演：{{ item.star }}</p>
          <p class="showinfo">{{ item.showInfo }}</p>
        </div>
        <div
          class="button"
          v-if="item.showStateButton"
          :class="{ blueButton: item.showStateButton.content === '预售' }"
        >
          {{ item.showStateButton.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["moviesList"],
  // props: ["moviesList", "moreList"],
  // computed: {
  //   resultList() {
  //     return [...this.moviesList, ...this.moreList];
  //   },
  // },

  methods: {
    goToDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style scoped lang="less">
.movies {
  background-color: #fff;
  margin-top: 10px;

  .movies-item {
    width: 375px;
    height: 114px;
    display: flex;

    .movies-left {
      width: 94px;
      height: 114px;
      .center();

      img {
        width: 64px;
        height: 95px;
      }
    }
    .movies-right {
      width: 281px;
      height: 114px;
      border-bottom: 1px solid @border-color;
      font-size: 13px;
      color: rgb(102, 102, 102);
      padding: 10px 15px 9px 0;
      display: flex;
      justify-content: space-between;

      .movies-info {
        width: 200px;

        .title {
          font-size: 17px;
          font-weight: 900;
          .ell();

          img {
            width: 43px;
            height: 14px;
          }
        }

        p {
          margin-bottom: 10px;
        }

        .star {
          width: 100%;
          .ell();
        }
      }

      .button {
        width: 54px;
        height: 28px;
        background-color: @theme-color;
        border-radius: 14px;
        color: #fff;
        font-size: 14px;
        .center();
        align-self: center;
      }

      .blueButton {
        background-color: rgb(60, 159, 230);
      }
    }
  }
}
</style>
